<!--
 * @Author: cjy
 * @Date: 2022-03-21 10:00:54
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-03-24 09:56:23
 * @Descripttion: 
 * @FilePath: \vue-openlayers-demos\src\views\vectorTiles\VectorTiles.vue
-->
<template>
  <div class="vm">
    <h2 class="h-title"> </h2>
    <div id="map" class="map-x"></div>
  </div>
</template>

<script>
import 'ol/ol.css'
import { Map, View } from 'ol'
import Tile from 'ol/layer/Tile'
import OSM from 'ol/source/OSM'
import XYZ from 'ol/source/XYZ'
import * as control from 'ol/control'
//
import { VectorTile as VectorLayerTile } from "ol/layer";
import { Style, Fill, Stroke } from "ol/style";
import { VectorTile as VectorSourceTile } from "ol/source";
import WMTSTileGrid from "ol/tilegrid/WMTS";
import { GeoJSON } from "ol/format";


export default {
  name: 'FirstMap',
  data () {
    return {
      map: {}
    }
  },
  methods: {
    initMap () {

      let tileSource = new VectorSourceTile({
          projection: "EPSG:4326",
          crossOrigin: 'anonymous',  
          // url: "http://120.76.197.111:8090/geoserver/gwc/service/wmts?request=GetTile&service=WMTS&version=1.0.0&layer=cite:sichuan&style=&tilematrix=EPSG:4326:{z}&tilematrixset=EPSG:4326&format=application/json;type=geojson&tilecol={x}&tilerow={y}",
          url: "http://localhost:8088/geoserver/gwc/service/wmts?REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&LAYER=cite:boul6_polygon&STYLE=&TILEMATRIX=EPSG:4326:{z}&TILEMATRIXSET=EPSG:4326&FORMAT=application/json;type=geojson&TILECOL={x}&TILEROW={y}",
          // url: "https://sgpt.wzsl.com:8081/wmts/geoserver/gwc/service/wmts?REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&LAYER=cite:boul6_polygon&STYLE=&TILEMATRIX=EPSG:4326:{z}&TILEMATRIXSET=EPSG:4326&FORMAT=application/json;type=geojson&TILECOL={x}&TILEROW={y}",
          format: new GeoJSON(), //切片格式
          tileGrid: new WMTSTileGrid({
              extent: [-180.0, -90.0, 180.0, 90.0], //范围
              resolutions: [
                  0.703125, 0.3515625, 0.17578125, 0.087890625, 0.0439453125,
                  0.02197265625, 0.010986328125, 0.0054931640625,
                  0.00274658203125, 0.001373291015625, 6.866455078125e-4,
                  3.4332275390625e-4, 1.71661376953125e-4, 8.58306884765625e-5,
                  4.291534423828125e-5, 2.1457672119140625e-5,
                  1.0728836059570312e-5, 5.364418029785156e-6,
                  2.682209014892578e-6, 1.341104507446289e-6,
                  6.705522537231445e-7, 3.3527612686157227e-7,
              ],
          }),
      })

      tileSource.on("tileloadend", function(evt){
        console.log(evt.tile.getState(), "evt==============");
        console.log(evt.tile.getFeatures(), "evt==============");
        // if()
        evt.tile.getFeatures().forEach(element => {
          if(element.get("name") == "大漈乡") {
            // console.log("qqqqqqqqqqqqqqqqqq")
            element.setStyle(new Style({
                stroke:new Stroke({
                    color: "rgba(0,255,0,0)",
                    width: 0
                }),
                fill: new Fill({
                    color: "rgba(0,255,0,0)",
                }),
            }))
            return;
          }else{
             element.setStyle(new Style({
                stroke:new Stroke({
                    color: "blue",
                    width: 2
                }),
                fill: new Fill({
                    color: "rgba(0,255,0,0.7)",
                }),
            }))
          }
        });
      })

      this.map = new Map({
        // controls: control.defaults({ zoom: false}),
        target: "map", 
        layers: [ 
          new Tile({
            source: new XYZ({
            //   url: 'http://t0.tianditu.com/DataServer?T=vec_c&x={x}&y={y}&l={z}&tk=4d314458b2e0a90a498c0ae62142c9fd',
              url: 'http://t0.tianditu.com/DataServer?T=img_c&x={x}&y={y}&l={z}&tk=4d314458b2e0a90a498c0ae62142c9fd',
              projection: "EPSG:4326",
            }),
          }),
        //   new Tile({
        //     source: new XYZ({
        //       url: 'http://t6.tianditu.com/DataServer?T=cva_c&x={x}&y={y}&l={z}&tk=4d314458b2e0a90a498c0ae62142c9fd',
        //       projection: "EPSG:4326",
        //     })
        //   }),
          new VectorLayerTile({
            source: tileSource,
            // 对矢量切片数据应用的样式
            style: new Style({
                fill: new Fill({
                    color: "rgba(255,128,0,0.2)",
                }),
                stroke: new Stroke({
                    color: "#40FF00",
                    width: 3,
                }),
            }),
          })
        ],
        view: new View({ 
          projection: "EPSG:4326",
          center: [119.5959663,27.89205555], 
        //   minZoom: 15, 
          zoom: 11 
        })
      })
    },
  },
  mounted () {
    this.initMap();
  }
}
</script>

<style lang="scss" scoped>
  
</style>